<template>
	<view class="category-area">
		<view class="category-area-container">
			<scroll-view class="first-category" :scroll-y="true">
				<view class="list">
					<view
						v-for="(cate, idx) in list"
						:key="cate.id"
						class="item"
						:class="{ on: idx === curFirstCateIdx }"
						@click="onSwitchFirstCate(idx)">
						{{ cate.cate_name }}
					</view>
				</view>
			</scroll-view>
			<scroll-view
				class="second-category"
				:scroll-y="true"
				:scroll-into-view="`curView-${curSecondCateRowIdx}`"
				:scroll-with-animation="true"
				@scroll="onSecondCateViewScroll">
				<view class="first-list">
					<view
						v-for="(cate1, idx1) in list"
						:key="cate1.id"
						class="first-item"
						:id="`curView-${idx1}`">
						<view class="fisrt-category-name">{{ cate1.cate_name }}</view>
						<view class="second-list">
							<navigator
								v-for="cate2 in cate1.children"
								:key="cate2.id"
								:url="`/pages/goods_list/goods_list?sid=${cate2.id}&sname=${cate2.cate_name}`"
								hover-class="none"
								class="second-item">
								<image :src="cate2.pic"></image>
								<view class="second-category-name">{{ cate2.cate_name }}</view>
							</navigator>
						</view>
					</view>
					<view class="supplement" :style="{ height: `${supplement}px` }"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data () {
			return {
				curFirstCateIdx: 0,
				supplement: 0,
				curSecondCateRowIdx: 0,
				cateArea: []
			}
		},
		watch: {
			list: {
				immediate: true,
				handler (nVal, oVal) {
					if (nVal.length) {
						this.computedSupplement()
					}
				}
			}
		},
		methods: {
			onSwitchFirstCate (idx) {
				this.curFirstCateIdx = idx
				this.curSecondCateRowIdx = idx
			},
			onSecondCateViewScroll ({ detail: { scrollTop } }) {
				for (let i = 0; i <= this.cateArea.length; i++) {
					const curCateArea = this.cateArea[i]
					if (scrollTop >= curCateArea.startY && scrollTop < curCateArea.endY) {
						this.curFirstCateIdx = i
						break
					}
				}
			},
			computedSupplement () {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.first-item').boundingClientRect(data => {
					let screenH = 0
					let cateArea = []
					uni.getSystemInfo({
						success ({ windowHeight }) {
							screenH = windowHeight
						}
					})
					data.forEach((item) => {
						screenH -= item.height
						
						cateArea.push({ startY: item.top - 54, endY: item.top + item.height - 54 })
					})
					
					this.cateArea = cateArea

					screenH += data.pop().top
					screenH -= 108
					this.supplement = screenH
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-area {
		&-container {
			--view-h: calc(100vh - 54px);
			display: flex;
			.first-category {
				width: 24%;
				height: var(--view-h);
				background-color: #f7f7f7;
				overflow-x: hidden;
				.list {
					.item {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100rpx;
						width: 100%;
						font-size: 26rpx;
						color: #424242;
						&.on {
							color: #fc4141;
							font-weight: 700;
							border-left: 4rpx solid #fc4141;
						}
					}
				}
			}
			
			.second-category {
				width: 76%;
				height: var(--view-h);
				overflow-x: hidden;
				.first-list {
					.first-item {
						padding-top: 20rpx;
						.fisrt-category-name {
							text-align: center;
							font-size: 28rpx;
							color: #333;
							height: 90rpx;
							line-height: 90rpx;
							margin: 0 30rpx;
							font-weight: 700;
						}
						.second-list {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							.second-item {
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 176rpx;
								margin-top: 26rpx;
								image {
									width: 120rpx;
									height: 120rpx;
									border-radius: 50%;
								}
								.second-category-name {
									width: 120rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: 24rpx;
									color: #333;
									height: 56rpx;
									text-align: center;
									line-height: 56rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
